<template>
  <div class="accountinterest">
    <!--  <el-row>
      <el-button class="" plain>生成</el-button>
      <el-button class="el-icon-printer" plain>打印</el-button>
    </el-row> -->
    <el-table
      :data="tableData"
      border
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      :row-style="{ height: '48px' }"
      style="width: 1751px"
      height="calc( 100vh - 150px)"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <!-- <el-table-column fixed prop="date" label="计息日" width="150">
        <template slot-scope="scope">
          {{ formatDate(scope.row.FinanceTime) }}
        </template>
      </el-table-column> -->
      <el-table-column fixed="left" label="操作" width="100">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small" @click="handleClick(scope.row)"
            >生成</el-button
          > -->
          <span
            v-if="
              (scope.row.ReviewResult == 9 && scope.row.ID != 0) ||
              (scope.row.ReviewResult == 10 && scope.row.ID != 0)
            "
            style="color: #409eff; cursor: pointer"
            @click="handlePrite(scope.row)"
            >打印</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="ReviewResult" label="申请状态" width="180">
        <template slot-scope="scope">
          <!-- <div v-if="scope.row.ID == 0">未计息</div> -->
          <div v-if="scope.row.ID == 0">未计息</div>
          <div v-else>
            <div v-if="scope.row.ReviewResult == 0">未提交</div>
            <div v-if="scope.row.ReviewResult == 1">待审核</div>
            <div v-if="scope.row.ReviewResult == 2">未通过</div>
            <div v-if="scope.row.ReviewResult == 9">审核通过</div>
            <div v-if="scope.row.ReviewResult == 10">已到账</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="InterestYear" label="年度" width="100">
      </el-table-column>
      <el-table-column prop="Demandrate" label="活期利率" width="100">
        <template slot-scope="scope">
          <div>
            {{ (scope.row.Demandrate * 100).toFixed(2) + "%" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="Fixedrate" label="定期利率" width="100">
        <template slot-scope="scope">
          <div>
            {{ (scope.row.Fixedrate * 100).toFixed(2) + "%" }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="Interested" label="计息人数">
        <template slot-scope="scope">
          {{ Number(scope.row.Interested) + Number(scope.row.NoInterest) }}
        </template>
      </el-table-column> -->
      <el-table-column prop="InterestMoney" label="计息金额" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.ID == 0"></div>
          <div v-if="scope.row.ID != 0">
            {{ number_format(scope.row.InterestMoney, 2) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="InterestNum" label="计息人数" width="110">
        <template slot-scope="scope">
          <div v-if="scope.row.ID == 0"></div>
          <div v-if="scope.row.ID != 0">{{ scope.row.InterestNum }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="OperName" label="申请人" width="100">
      </el-table-column>
      <el-table-column prop="OperTime" label="申请时间" width="180">
        <template slot-scope="scope">{{
          formatDate(scope.row.OperTime)
        }}</template>
      </el-table-column>
      <!-- <el-table-column prop="ReviewResult" label="审核状态"></el-table-column> -->
      <el-table-column
        prop="ReviewName"
        label="审核人"
        width="100"
      ></el-table-column>
      <el-table-column prop="ReviewTime" label="审核时间" width="180">
        <template slot-scope="scope">{{
          formatDate(scope.row.ReviewTime)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="FinanceName"
        label="到账人"
        width="100"
      ></el-table-column>
      <el-table-column prop="FinanceTime" label="到账时间" width="180">
        <template slot-scope="scope">{{
          formatDate(scope.row.FinanceTime)
        }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="预览" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.InterestMoney > 0">
            <span
              @click="handleCurrentChange(scope.row)"
              style="color: #409eff; cursor: pointer"
              >预览</span
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="账户计息详情"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-table
        fit
        :data="tableInfo"
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        :row-style="{ height: '48px' }"
        height="450"
      >
      <el-table-column type="index" label="序号" width="60" fixed="left"></el-table-column>
        <el-table-column prop="Village" label="乡镇" width="150">
        </el-table-column>
        <el-table-column prop="Township" label="村"> </el-table-column>
        <!-- <el-table-column prop="YearNum" label="年度"></el-table-column> -->
        <el-table-column prop="ProjectName" label="项目名称" width="126">
        </el-table-column>
        <el-table-column prop="socialsecuritytype" label="参保类型" width="120">
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.socialsecuritytype == 0">其他</span>
              <span v-else-if="scope.row.socialsecuritytype == 1">城居保</span>
              <span v-else-if="scope.row.socialsecuritytype == 2">职保</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="姓名"></el-table-column>
        <el-table-column prop="Gender" label="性别"></el-table-column>
        <el-table-column
          prop="Identitynum"
          label="身份证号"
          width="180"
        ></el-table-column>
        <!-- <el-table-column prop="InterestYear" label="计息年度"></el-table-column> -->
        <el-table-column prop="InterestMoney" label="年度余额" width="99">
          <template slot-scope="scope">
            <div>
              {{ number_format(scope.row.InterestMoney, 2) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="Money" label="年度利息"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
    <!-- <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
    <div class="row" id="printTest" style="visibility: hidden">
      <div id="div1">
        <div class="title" style="text-align: center">
          <h3
            id="PageTitle"
            class="text-center"
            style="border-collapse: collapse; margin-left: 0pt"
          >
            被征地农民参保补贴账户利息到账申请单
          </h3>
        </div>
        <table width="100%">
          <tr>
            <td style="border: none; font-size: 9pt">
              <p>
                <span>计息年份:</span>
                <span id="ProjectName">{{ this.yearV }}</span>
              </p>
            </td>
            <td style="text-align: left; border: none; font-size: 8pt">
              <p><span id="ProjectName"></span></p>
            </td>
            <td colspan="2"></td>
            <td></td>
            <td style="text-align: right; font-size: 8pt">
              <span tdata="pageNO" format="#">第#页</span>/<span
                tdata="pageCount"
                format="#"
                >总##页</span
              >
            </td>
          </tr>
        </table>
      </div>
      <div id="div2">
        <table style="border: 1px solid" width="100%">
          <tr>
            <td colspan="3" style="width: 25%;">活期利率</td>
            <td colspan="3" style="width: 25%;">{{ number_format(this.huoqi * 100, 2) + "%" }}</td>
            <td colspan="3" style="width: 25%;">一年期定期利率</td>
            <td colspan="3" style="width: 25%;">{{ number_format(this.dingqi * 100, 2) + "%" }}</td>
          </tr>
        </table>
      </div>
      <div id="div3">
        <table style="border: 1px solid" width="100%">
          <thead>
            <tr>
              <td colspan="1">序号</td>
              <td style="text-align: center" colspan="2">乡镇</td>
              <td style="text-align: center" colspan="2">村</td>
              <td style="text-align: center" colspan="2">项目名称</td>
              <td style="text-align: center" colspan="2">参保类型</td>

              <td style="text-align: center" colspan="2">姓名</td>
              <td style="text-align: center" colspan="1">性别</td>
              <td style="text-align: center" colspan="4">身份证号</td>
              <!-- <td style="text-align: center" colspan="3">征地日期</td> -->
              <td style="text-align: center" colspan="3">年度余额</td>
              <td style="text-align: center" colspan="2">利息</td>
            </tr>
          </thead>
          <tbody id="detail">
            <tr v-for="(item, index) in tableList" :key="index">
              <td colspan="1">{{ index + 1 }}</td>
              <td style="text-align: center" colspan="2">{{item.Township}}</td>
              <td style="text-align: center" colspan="2">{{item.Village}}</td>
              <td style="text-align: center" colspan="2">{{item.ProjectName}}</td>
              <td style="text-align: center" colspan="2">
                <div v-if="item.socialsecuritytype == 1">城居保</div>
                <div v-else-if="item.socialsecuritytype == 2">职保</div>
                <div v-else>其他</div>
              </td>
              <td colspan="2">{{ item.Name }}</td>
              <td colspan="1">{{ item.Gender }}</td>
              <td colspan="4">{{ item.Identitynum }}</td>
              <!-- <td colspan="3" style="text-align: center">
                {{
                  item.LandExpropriatedAge == 0 ? "-" : item.LandExpropriatedAge
                }}
              </td> -->
              <td colspan="3" style="text-align: right;">{{ number_format(item.Balance,2) }}</td>
              <td colspan="2" style="text-align: right;">
                {{ item.Money == 0 ? "-" : number_format(item.Money,2) }}
              </td>
            </tr>
          </tbody>
          <tr>
            <td colspan="4">总计金额</td>
            <td colspan="16" style="text-align: right" id="SumMoney">
              {{ number_format(this.allMoney, 2) }}
            </td>
          </tr>
          <tr>
            <td colspan="4">总计金额（大写）</td>
            <td colspan="16" style="text-align: left" id="CSumMoney">
              {{ this.allMoneyBig }}
            </td>
          </tr>
          <tr>
            <td colspan="7" style="width: 33%;">经办人：</td>
            <td colspan="7" style="width: 33%;">审核人：</td>
            <td colspan="8" style="width: 33%;">负责人：</td>
          </tr>
        </table>
      </div>
      <div id="div4">
        <table style="border: 0px solid" width="100%">
          <tr>
            <td style="text-align: left; font-size: 8pt">
              制单人：{{ this.username }}
            </td>
            <td></td>
            <td style="text-align: left; font-size: 8pt">
              制单时间:{{ dateToString(new Date()) }}
            </td>
            <td></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { API_INSET_V, API_INSET_APP, API_INSET_ID } from "../../api/account";
export default {
  name: "",
  data() {
    return {
      msg: "账户利息制单",
      tableData: [],
      pagesize: 10, //每页的数据条数
      currentPage: 1,
      username: "",
      yearV: "",
      huoqi: "",
      dingqi: "",
      allMoney: "",
      allMoneyBig: "",
      tableList: [],
      tableInfo: [],
      dialogVisible: false,
    };
  },
  methods: {
    yearjs(num) {
      if ((num % 12 != 0) & (num > 12)) {
        return parseInt(num / 12) + "年" + (num % 12) + "月";
      } else if (num < 12) {
        return num + "月";
      } else {
        return parseInt(num / 12);
      }
    },
    handleClick() {
      console.log("生成");
    },
    handlePrite(row) {
      console.log("打印");
      let data = { ID: row.ID };
      console.log(row.InterestYear);
      this.yearV = row.InterestYear;
      this.huoqi = row.Demandrate;
      this.dingqi = row.Fixedrate;
      this.allMoney = row.InterestMoney;
      this.allMoneyBig = this.$moneyBig.required(row.InterestMoney);
      console.log(this.allMoneyBig);
      API_INSET_ID(data)
        .then((res) => {
          console.log(res);
          this.tableList = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
      API_INSET_APP(data)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        })
        .then((res) => {
          var strStyle =
            "<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse}span{ font-size:8pt ;text-align:left;margin-top:5px;margin-left:15px;}td{font-size:8pt ;padding:5px;}</style>";
          LODOP.ADD_PRINT_HTM(
            26,
            "5%",
            "90%",
            109,
            document.getElementById("div1").innerHTML
          );
          LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
          LODOP.SET_PRINT_STYLEA(0, "LinkedItem", 1);
          LODOP.ADD_PRINT_TABLE(
            100,
            "5%",
            "RightMargin:1cm",
            400,
            strStyle + document.getElementById("div2").innerHTML
          );
          LODOP.SET_PRINT_STYLEA(0, "Vorient", 3);
          LODOP.ADD_PRINT_TABLE(
            123,
            "5%",
            "RightMargin:1cm",
            "BottomMargin:1cm",
            strStyle + document.getElementById("div3").innerHTML
          );
          LODOP.SET_PRINT_STYLEA(0, "Offset2Top", -10);
          LODOP.ADD_PRINT_HTM(
            "280mm",
            "15mm",
            "200mm",
            "2cm",
            document.getElementById("div4").innerHTML
          );
          LODOP.SET_PRINT_STYLEA(0, "ItemType", 1);
          LODOP.SET_PRINT_STYLEA(0, "LinkedItem", 4);
          //LODOP.SET_PRINT_STYLEA(0, "VOrient", 1);
          LODOP.PREVIEW();
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    // handleCurrentChange(currentPage) {
    //   this.currentPage = currentPage;
    // },
    handleCurrentChange(val) {
      // this.currentRow = val;
      // console.log(val);
      this.dialogVisible = true;
      let data = {
        ID: val.ID,
      };
      API_INSET_ID(data)
        .then((res) => {
          console.log(res);
          this.tableInfo = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    formatDate(time) {
      if (time != "") {
        if (time.toString().substr(6, 13) < 0) {
          return "";
        } else {
          return this.timeD(new Date(parseInt(time.toString().substr(6, 13))));
        }
      }
    },
    // 金额格式化
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
    handleClose() {
      this.dialogVisible = false;
    },
    timeD(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    dateToString(date) {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var second = date.getSeconds();
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    },
    onsubmit() {
      API_INSET_V()
        .then((res) => {
          console.log(res);
          this.tableData = res.ResList;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    number_format(number, decimals, dec_point, thousands_sep) {
      /*
       * 参数说明：
       * number：要格式化的数字
       * decimals：保留几位小数
       * dec_point：小数点符号
       * thousands_sep：千分位符号
       *
       */
      number = (number + "").replace(/[^0-9+-Ee.]/g, "");
      var n = !isFinite(+number) ? 0 : +number,
        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
        dec = typeof dec_point === "undefined" ? "." : dec_point,
        s = "",
        toFixedFix = function (n, prec) {
          var k = Math.pow(10, prec);
          return "" + parseInt(n * k) / k;
        };
      s = (prec ? toFixedFix(n, prec) : "" + parseInt(n)).split(".");
      var re = /(-?\d+)(\d{3})/;
      while (re.test(s[0])) {
        s[0] = s[0].replace(re, "$1" + sep + "$2");
      }
      if ((s[1] || "").length < prec) {
        s[1] = s[1] || "";
        s[1] += new Array(prec - s[1].length + 1).join("0");
      }
      return s.join(dec);
    },
  },
  created() {
    this.onsubmit();
    this.username = localStorage.getItem("user");
  },
};
</script>

<style scoped lang="scss">
.accountinterest {
  padding: 30px;
  .el-row {
    text-align: right;
    max-width: 1399px;
  }
  .el-table {
    margin-top: 20px;
  }
  .el-pagination {
    max-width: 1399px;
    text-align: right;
  }
  /* 打印的东西隐藏起来 */
  @media only screen {
    #printTest {
      display: none;
    }
  }
}
</style>
